<template>
  <div class="aside-tree-container">
    <div class="projet-head">
      <el-input
        v-model="deptName"
        placeholder="请输入部门/项目名称 → 回车检索"
        clearable
        size="mini"
        prefix-icon="el-icon-search"
        style="margin-bottom: 12px;width: 180px;margin-left: 20px;margin-right: 10px;"
        @keyup.enter.native="searchProject"
      />
      <el-button type="primary" size="mini" icon="el-icon-search" @click="searchProject">搜索</el-button>
    </div>
    <el-scrollbar ref="scrollbarRef" style="height: calc(100vh - 180px);">
      <el-tree
        ref="tree"
        v-loading="projectLoading"
        node-key="id"
        accordion
        :data="deptOptions"
        :props="defaultProps"
        highlight-current
        :expand-on-click-node="false"
        :default-expanded-keys="expandKeys"
        :filter-node-method="filterNodeDept"
        @node-click="handleNodeClickDept"
      >
        <div slot-scope="{ node, data }">
          <svg-icon v-if="data.type === 'dept'" icon-class="ico_area" class="preview-icon" />
          <svg-icon
            v-else-if="data.type === 'project'"
            class="preview-icon"
            style="color: #416ca6;"
            icon-class="druid"
          />
          <span style="padding-left: 6px;">{{ node.label }}</span>
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import { getDeptProject } from '@/api/common'
export default {
  name: 'ProjectTree',
  props: {
    type: { // 0: 项目前期名 1：项目后期名称
      type: Number,
      default: () => 1
    }
  },
  data() {
    return {
      deptName: '',
      projectLoading: false,
      deptOptions: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expandKeys: [],
      currentProjet: {}
    }
  },
  watch: {
    // 根据名称筛选部门树
    // deptName(val) {
    //   this.$refs.tree.filter(val)
    // }
  },
  created() { // 初始化
    this.currentProjet = JSON.parse(localStorage.getItem('currentProject'))
    this.getTreeselect()
  },
  methods: {
    // 检索
    searchProject() {
      this.$refs.tree.filter(this.deptName)
    },
    /** 查询部门与项目下拉树结构 */
    getTreeselect() {
      this.projectLoading = true
      getDeptProject({ type: this.type }).then((response) => {
        this.deptOptions = response.data
        const datas = [...response.data]
        if (this.currentProjet) {
          this.handleNodeClickDept(this.currentProjet)
          this.$nextTick(() => {
            // this.deptName = this.currentProjet.name
            // this.searchProject()
            // this.$refs.tree.filter(this.currentProjet.name)
            this.$refs.tree.setCurrentKey(this.currentProjet.id)
            this.expandKeys = [this.currentProjet.id]
            setTimeout(() => {
              this.$refs.scrollbarRef.wrap.scrollTop = document.querySelector('.is-current').offsetTop - 300
            }, 500)
          })
          return
        }
        if (datas.length > 0) {
          recursion(datas[0].children)
        }
      }).finally(() => {
        this.projectLoading = false
      })
      const self = this
      function recursion(datas) { // 递归获取第一个项目
        if (datas[0].type === 'project') {
          self.expandKeys.push(datas[0].parentId)
          self.handleNodeClickDept(datas[0])
          // self.deptName = datas[0].name
          self.$nextTick(() => {
            self.$refs.tree.setCurrentKey(datas[0].id)
          })
        } else if (datas[0].children && datas[0].children.length > 0) {
          recursion(datas[0].children)
        }
      }
    },
    // 组织筛选节点
    filterNodeDept(value, data, node) {
      if (!value) return true
      // return data.label.indexOf(value) !== -1
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label && label.indexOf(value) !== -1)
    },
    // 组织的项目节点节点单击事件
    handleNodeClickDept(data) {
      if (data.type === 'project') {
        localStorage.setItem('currentProject', JSON.stringify(data))
        this.$emit('selectProject', data)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  .aside-tree-container {
    .projet-head {
      padding-top: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
    }
    font-size: 12px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  }
</style>
<style lang="scss">
  .check-type-scrollbar-container,
  .aside-tree-container {
    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
